<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户列表</title>
    <link rel="stylesheet" href="element/element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js" type="text/javascript"></script>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/axios-0.18.0.js"  type="text/javascript"></script>
    <script src="element/element-ui/lib/index.js"></script>

</head>
<body>
<div id="div">
    <b style="color: red; font-size: 20px;">用户列表</b>
    <form>
        ID: <el-input v-model="input" style="width:20%"  placeholder="请输入"></el-input>
        昵称：<el-input v-model="input" style="width:20%" placeholder="请输入"></el-input>
        城市：<template>
        <el-select v-model="value" placeholder="请选择">
            <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>
    </template>
        <el-button type="primary" @click="showAddStu">查询</el-button>
    </form>


    <el-table :data="tableData">
        <el-table-column prop="id" label="序号" width="120">
        </el-table-column>
        <el-table-column prop="userId" label="ID" width="120">
        </el-table-column>
        <el-table-column prop="nickname" label="昵称" width="140">
        </el-table-column>
        <el-table-column prop="sex" label="性别">
        </el-table-column>
        <el-table-column prop="city" label="城市">
        </el-table-column>
        <el-table-column prop="lastActiveTime" label="最近活跃时间">
        </el-table-column>
        <el-table-column prop="userStatus" label="账号状态">
        </el-table-column>
        <el-table-column label="操作" width="180">
            <template slot-scope="props">
                <el-button type="warning" @click="showUserInfo(props.row)">详细信息</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--
    分页组件
      @size-change： 当改变每页条数时触发的函数
      @current-change：当改变页码时触发的函数
      current-page ：默认的页码
      :page-sizes：每页条数选择框中显示的值
      :page-size : 默认的每页条数
      layout： 分页组件的布局
          total（总条数）, sizes(每页条数), prev（上一页）, pager(所有的页码), next(下一页), jumper（跳转页码）
      :total: 总条数
-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-sizes="[3,5,8]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total">
    </el-pagination>

    <el-dialog title="编辑学生信息" :visible.sync="dialogTableVisible4edit" @close="resetForm('editForm')" >
        <!--
            :model="formData": 关联数据
            :rules: 关联校验规则
            ref： 在获取表单对象时使用
        -->
        <el-form :model="editFormData" :rules="rules" ref="editForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="用户ID" prop="id" style="width:50%">
                    <el-input v-model="editFormData.id" disabled></el-input>
                </el-form-item>

                <el-form-item label="昵称" prop="nickname" style="width:50%">
                    <el-input v-model="editFormData.nickname" disabled></el-input>
                </el-form-item>

            <el-form-item label="用户编号" prop="mobile" style="width:50%">
                <!--v-model : 双向绑定 -->
                <el-input v-model="editFormData.mobile" disabled prop="sex" ></el-input>
            </el-form-item>

            <el-form-item label="性别" prop="sex" style="width:50%">
                <el-input v-model="editFormData.sex" disabled></el-input>
            </el-form-item>

            <el-form-item label="个性签名" prop="personalSignature" style="width:50%">
                <el-input v-model="editFormData.personalSignature" disabled></el-input>
            </el-form-item>

            <el-form-item label="年龄" prop="age" style="width:50%">
                <el-input v-model="editFormData.age" disabled></el-input>
            </el-form-item>

            <el-form-item label="被喜欢人数" prop="countBeLiked" style="width:50%">
                <el-input v-model="editFormData.countBeLiked" disabled></el-input>
            </el-form-item>

            <el-form-item label="收入" prop="income" style="width:50%">
                <el-input v-model="editFormData.income" disabled></el-input>
            </el-form-item>

            <el-form-item label="喜欢人数" prop="countLiked" style="width:50%">
                <el-input v-model="editFormData.countLiked" disabled></el-input>
            </el-form-item>

            <el-form-item label="职业" prop="occupation" style="width:50%">
                <el-input v-model="editFormData.occupation" disabled></el-input>
            </el-form-item>

            <el-form-item label="配对人数" prop="countMatching" style="width:50%">
                <el-input v-model="editFormData.countMatching" disabled></el-input>
            </el-form-item>

            <el-form-item label="用户状态" prop="userStatus" style="width:50%">
                <el-input v-model="editFormData.userStatus" disabled></el-input>
            </el-form-item>

            <el-form-item label="注册时间" prop="created" style="width:50%">
                <el-input v-model="editFormData.created" disabled></el-input>
            </el-form-item>

            <el-form-item label="注册地区" prop="city" style="width:50%">
                <el-input v-model="editFormData.city" disabled></el-input>
            </el-form-item>

            <el-form-item label="最近活跃时间" prop="lastActiveTime" style="width:50%">
                <el-input v-model="editFormData.lastActiveTime" disabled></el-input>
            </el-form-item>

            <el-form-item label="最近登录地区" prop="lastLoginLocation" style="width:50%">
                <el-input v-model="editFormData.lastLoginLocation" disabled></el-input>
            </el-form-item>
        </el-form>
    </el-dialog>



</div>
</body>
<script>
    var app = new Vue({
        el:"#div",
        data:{
            dialogTableVisible4edit: false, //详细窗口显示状态
            tableData:[],//表格数据
            editFormData: {},//详细表单的数据
            pagination: {
                currentPage: 1, //当前页
                pageSize: 5,    //每页显示条数
                total: 0       //总条数
            }
        },
        created(){
            //创建完毕之后获取分页数据
            this.selectByPage();
        },
        methods:{
            selectByPage(){
                axios.defaults.headers.common["Authorization"] = 'eyJhbGciOiJIUzI1NiJ9.eyJpZCI6MSwiZXhwIjoxNjE0ODg2NDEzLCJ1c2VybmFtZSI6ImFkbWluIn0.qT6JPzi82U8Yk5HGpmHMw8zpQSShne18oxIpAAbdfvY';
                axios.post("manage/users?page="+this.pagination.currentPage+"&pagesize="+this.pagination.pageSize).then((res)=>{
                    app.tableData= res.data.items;
                }).catch((err)=>{
                    alert("获取失败...");
                })
               // alert(app.tableData);
                /*$.ajax({
                    //请求资源路径
                    url:"manage/users",
                    //是否异步
                    async:false,

                    //请求参数
                    data:{
                        "page":this.pagination.currentPage,
                        "pagesize":this.pagination.pageSize
                    },
                    //请求方式
                    type:"POST",
                    //数据形式
                    dataType:"json",
                    //请求成功后调用的回调函数
                    success:function (data) {
                        //this.tableData=data.items;
                        app.tableData= data.items;

                        /!*[{
                            "id":2,
                            "user_id":9968,
                            "nick_name":"tom",
                            "sex":"男",
                            "city":"济南市",
                            "updated":"2021/03/04",
                            "state":"正常"
                        }]*!/
                    },
                    //请求失败后调用的回调函数
                    error:function () {
                        alert("获取失败...");
                    }
                });
                alert(app.tableData);*/
            },
            showUserInfo(row) {
                /*var data={
                    "income": 1223,
                    "countLiked": 18,
                    "lastActiveTime": 2147483647,
                    "userStatus": "冻结",
                    "occupation": "教师",
                    "city": "杭州",
                    "created": 20210211,
                    "sex": "男",
                    "lastLoginLocation": "济南",
                    "mobile": "12345678901",
                    "countBeLiked": 6,
                    "tags": "音乐,上班族",
                    "personalSignature": null,
                    "nickname": "dajska",
                    "logo": null,
                    "countMatching": 6,
                    "id": 7,
                    "age": 26
                };*/
                app.dialogTableVisible4edit = true;
                app.editFormData = {
                    id:row.id,
                    nickname:row.nickname,
                    mobile:row.mobile,
                    sex:row.sex,
                    personalSignature:row.personalSignature,
                    age:row.age,
                    countBeLiked:row.countBeLiked,
                    income:row.income,
                    countLiked:row.countLiked,
                    occupation:row.occupation,
                    countMatching:row.countMatching,
                    userStatus:row.userStatus,
                    created:row.created,
                    city:row.city,
                    lastActiveTime:row.lastActiveTime,
                    lastLoginLocation:row.lastLoginLocation

                }
            }
            },
            //改变每页条数时执行的函数
            handleSizeChange(pageSize) {
                //修改分页查询的参数
                app.pagination.pageSize = pageSize;
                //重新执行查询
                app.selectByPage();
            },
            //改变页码时执行的函数
            handleCurrentChange(pageNum) {
                //修改分页查询的参数
                app.pagination.currentPage = pageNum;
                //重新执行查询
                app.selectByPage();
            },
    });
</script>
</html>